<template>
  <!-- 列表头 -->

  <div>
    <el-table-column
      v-for="(item, index) in columnsTitle"
      :key="index"
      :width="item.width || ''"
      :type="item.type || ''"
      :prop="item.key || ''"
      header-align="center"
      align="center"
      show-overflow-tooltip
      :fixed="item.fixed || ''"
      :sortable="item.sortable || ''"
      :label="item.title || ''"
      :minWidth="item.minWidth || ''"
      :index="item.index"
    >
      <template #header="scope" v-if="item.title">
        <span class="headerBox">{{ scope.column.label || '' }}</span>
      </template>

      <template #default="scope" v-if="item.type !== 'selection' && item.type !== 'index'">
        <template v-if="item.render">
          <cl-expand :column="item" :row="scope.row" :render="item.render" :index="index" />
        </template>

        <template v-else-if="item.children && item.children.length">
          <span>{{ item }}</span>
          <cl-table-column :columns-title="item.children"></cl-table-column>
        </template>

        <template v-else-if="item.type !== 'selection'">
          <span>{{ scope.row[item.key] || '' }}</span>
        </template>
      </template>
    </el-table-column>
  </div>
</template>

<script>
import ClExpand from '../expand/expand'

export default {
  props: {
    columnsTitle: {
      type: Array,
      default: () => [],
    },
  },

  components: {
    ClExpand,
  },
}
</script>

<style lang="scss" scoped>
.headerBox {
  font-weight: 600;
  color: #515a6e;
}
</style>
